<template>
	<view class="container">
		<view class="stastics">
			<view class="tab" :class="State==-1?'select':''" @click="Tab(-1)"><view id="totalcount" class="count">{{Count0+Count1}}</view><view class="name">全部</view></view>
			<view class="tab" :class="State== 0?'select':''" @click="Tab(0)"><view id="count0" class="count">{{Count0}}</view><view class="name">未缴费</view></view>
			<view class="tab" :class="State== 1?'select':''" @click="Tab(1)"><view id="count1" class="count">{{Count1}}</view><view class="name">已缴费</view></view>
		</view>
		<view class="list" v-for="item in List" @click="ParkInfo(item.ID)">
			<view class="title">违章信息 <view :class="'state '+ (item.State==0?'red':'blue')">{{item.StateText}}</view></view>
			<view class="line"><view class="name">违章车辆：</view><view class="value">{{item.CarNum}}</view><view class="gopay">去缴费</view></view>
			<view class="line"><view class="name">罚款金额：</view><view class="value red">200.00</view></view>
			<view class="line"><view class="name">违章时间：</view><view class="value">{{item.CreateDate.ToTime()}}</view></view>
			<view class="line border-b"><view class="name">违章地点：</view><view class="value">{{item.Address}}</view></view>
			<view class="bottom"><view class="name">查看详情</view><view class="arrow"></view></view>
		</view>
		<view class="loading" v-if="List.length==0">暂无违章记录</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				State:-1,
				List:[],
				Count0:0,
				Count1:0,
				CarNum:''
			};
		},
		onLoad(options) {
			this.CarNum=options.CarNum;
		},
		onShow(){
			this.Find_ParkByCarNum();
		},
		methods:{
			Tab(State){
				this.State = State;
				this.List=[];
				this.Find_ParkByCarNum();
			},
			ParkInfo(ID){
				uni.navigateTo({
					url:'parkinfo?ID='+ID
				})
			},
			Find_ParkByCarNum(){
				var data = {};
				data.State=this.State;
				data.CarNum=this.CarNum;
				data.Act="Find_ParkByCarNum";
				this.Util.Loading("加载中...");
				this.Util.Member(data, json=>{
					this.Util.HideLoading();
					this.List = json.Data.List;
					if(this.State==-1){
						this.Count0 = json.Data.Count0;
						this.Count1 = json.Data.Count1;
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page{background-color:#ededed; padding:8px;}
	.loading{width:100%; padding-top:30px; text-align:center; color:#757575;}
	.stastics{width:100%; height:auto; border-radius:8px; background-color:#ffffff; display:flex; flex-direction:row; margin-bottom:10px;}
	.stastics .tab{width:33.33%; height:70px;}
	.stastics .tab .count{width:100%; height:30px; padding-top:10px; font-size:20px; text-align:center;}
	.stastics .tab .name{width:100%; height:30px; line-height:30px; font-size:30rpx; text-align:center; color:gray;}
	.stastics .select{background-color: #0181fe; border-radius: 8px; color:#ffffff !important;}
	.stastics .select .name{ color:#ffffff !important;}
	.list{width:100%; height:auto; border-radius:8px; background-color:#ffffff; font-size:30rpx; padding:15px; padding-bottom:0px; margin-bottom:10px;}
	.list:active{background-color:#f6f5f5;}
	.list .title{font-size:18px; height:40px;}
	.list .state{font-size:30rpx; height:40px; float:right;}
	.list .line{width:100%; height:auto; min-height:20px; padding-bottom:10px; display:flex; flex-direction:row;}
	.list .line .name{width:auto; color:#808080;}
	.list .line .value{flex:1;  text-align:left; padding-left:10px;}
	.list .bottom{width:100%; height:auto; min-height:40px; line-height:40px;}
	.list .bottom .name{width:auto; float:left;}
	.list .bottom .arrow{float:right; margin-top:10px; width:14px; height:14px; background:url(http://xipingzhifa.qiyedaishu.com/img/arrow3.png); background-size:14px; background-repeat:no-repeat; }
	.gopay{width:auto; height:40rpx; line-height:40rpx; padding-left:10rpx; padding-right:10rpx; border-radius:6rpx; text-align:center; color:#ffffff; font-size:28rpx; background:#23a002;}
</style>
